<template>
  <main>
    <span @click="toessay">文章</span>
    <span @click="toMessage">留言</span>
    <span @click="toChain">友链</span>
    <span @click="addssay">添加</span>
    <span @click="toLog">日志</span>
  </main>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "",
  components: {},
  setup() {
    let router = useRouter();
    function toessay() {
      router.push("/home/useressay");
    }

    function addssay() {
      router.push("/home/addessay");
    }

    function toLog() {
      router.push("/home/SelectLog");
    }

    function toChain() {
      router.push("/home/FriendChain");
    }

    function toMessage() {
      router.push("/home/AdminMessage");
    }

    return {
      toessay,
      addssay,
      toLog,
      toChain,
      toMessage,
    };
  },
});
</script>

<style scoped lang="scss">
@import "@/style/mixin.scss";
main {
  span {
    display: block;
    background-color: rebeccapurple;
    margin-top: 5rem;
    line-height: 2rem;
  }
  span:nth-child(1) {
    background-color: gold;
    @include spanStyle;
    &:after {
      background-color: gold;
    }
  }

  span:nth-child(2) {
    background-color: rebeccapurple;
    @include spanStyle;
    &:after {
      background-color: rebeccapurple;
    }
  }

  span:nth-child(3) {
    background-color: lightblue;
    @include spanStyle;
    &:after {
      background-color: lightblue;
    }
  }

  span:nth-child(4) {
    background-color: teal;
    @include spanStyle;
    &:after {
      background-color: teal;
    }
  }

  span:nth-child(5) {
    background-color: paleturquoise;
    @include spanStyle;
    &:after {
      background-color: paleturquoise;
    }
  }

  span:nth-child(6) {
    background-color: cornflowerblue;
    @include spanStyle;
    &:after {
      background-color: cornflowerblue;
    }
  }
}
</style>
